<html>
  <head>
    <title>HTML 文档结构</title>
    <!-- <link rel="stylesheet" href="index.css" /> -->
  </head>
  <body style="color: darkorchid">
    <!-- vfdsfs -->
    <div class="main">
      <div class="row">
        <input class ="input" type="text" onclick="keyup(event)" id="inputtext"/>
        <input type="button" name="bt" value="确认1 " onclick="handleClick(event)"/>
        <!-- <input type="button" id="button2" value="确认2"/> -->
      </div>
      <div id = "todogroup">
        <div class='item-value'>
        </div>
        <!-- <div id = "todo0">
        <input type = "checkbox" name = "todocheck">吃饭 <button type = "button" onclick = "deletByIndex(0)">删除</button></div>
        <div>睡觉</div> -->
      </div>
      <!-- <span style="color: rgb(0, 0, 252)"
        >asd&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rts</span -->
        <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')"></div>
    </div>
  </body>
  <script lang="javascript">

    var intCnt = 0;
    function init() {
    //   console.log('xxxx');
      document.getElementById("button2").onclick = handleClick;
    //   console.log('xxxxxxx');
    }
    // console.log('xxxxxxx');
    function keyup(e)
    {
        // console.log(e);
        if(e.keyCode==13)
        {
            handleClick();
        }

    }
    function handleClick(e) {
      console.log('handleClick');
      console.log(e);

      // var temp=document.getElementsByName("bt");
      // console.log(temp);

      // var temp = getValue();
      // console.log(temp.value);
      // var div = document.createElement("div");
      // div.innerText = temp;
      // document.getElementById("todogroup").append(div);
      // document.getElementsByClassName("main")[0].style = "background-color: #33333333"
      //document.getElementById("todogroup").innerHTML += "<div>" + temp + "</div>";
      var temp = getValue();
      document.getElementById("todogroup").innerHTML += "<div class='item' id = 'todo"+ intCnt + "'><input type = 'checkbox' name = 'todocheck'><div class='item-value'>"
        + temp + "</div><button class ='item-del' type = 'button' onclick = 'deletByIndex(" + intCnt + ")' class='five'>删除</button></div>";
      document.getElementById("inputtext").value = "";
      intCnt++;

    }
    init();
    function enter(id){
   document.getElementById(id).style='bacground-color: #eaeaea'
    }
    function leave(id){
   document.getElementById(id).style='bacground-color: red'
    }
    function getValue(){
      var temp = document.getElementById("inputtext");
      console.log(temp.value);

      return temp.value;
    }
    function deletByIndex(index){
      document.getElementById("todo" + index).remove();
    }

  </script>
  <style>
    body {
      /* display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh; */
      margin: 50px auto;
      width: 300px;
      height: 500px;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid black;
    }

    .main {
      /* background-color: aqua; */
      /* width: 200px; */
      /* height: 200px
      ; */

    }
    .row {
      display: flex;
    }
     .item{
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
     }
     .item:hover{
        background-color: gray;
     }
     .item-value{
        flex-grow: 1;
        color: black;
     }
     .item-del{
        color: white;
       background-color: red;
       border: 0px;
       opacity: 0;
     }
     .item:hover .item-del{
        opacity:1;
     }
     .input
     {
      width: 250px;
        padding: 8px;
        outline: none;
       border:1px solid skyblue;
     }
     .input:focus{
        box-shadow: 0px 0px 10px skyblue;
        border:2px solid skyblue;

     }
  </style>
</html>